<template>
  <PageWrapper title="">
    <XGrid ref="xGrid"
    :stripe="true"
    :columns="columns"
    :print-style="printStyle"
    :print-top="topHtml"
    :print-bottom="bottomHtml"
    @checked-count="checkedCount">
      <template #topLeft2>
        <Popconfirm
          placement="bottom"
          title="警告: 【重新装载】所有的系统API策略?"
          ok-text="确定"
          cancel-text="取消"
          :disabled="reloadPolicyLoading"
          @confirm="handleReloadPolicy">
          <a :class="{disabled:!handleReloadPolicy}">重载策略</a>
        </Popconfirm>
        <Divider type="vertical"/>
        <Popconfirm
          placement="bottom"
          title="提示: 选择是否记录日志?"
          ok-text="埋点"
          cancel-text="不埋点"
          :disabled="logOpt.show"
          @confirm="handlePolicyLog(true)"
          @cancel="handlePolicyLog(false)">
          <a :class="{disabled:logOpt.show}">{{logOpt.title}}</a>
        </Popconfirm>
      </template>
    </XGrid>

  </PageWrapper>
</template>
<script lang="ts" name="Policy" setup>
import {ref, reactive,} from 'vue';
import {PageWrapper} from '/@/components/Page';
import {XGrid} from '/@/components/XGrid';
import {columns, printStyle, topHtml, bottomHtml} from './data';
import {Divider, Popconfirm} from 'ant-design-vue';
import {reloadPolicy, log} from '/@/api/admin/policy';

const xGrid = ref()

const reloadPolicyLoading = ref(false);
const handleReloadPolicy = () => {
  reloadPolicyLoading.value = true
  reloadPolicy().then(() => {
    xGrid.value.reload()
    reloadPolicyLoading.value = false
  }).catch(() => reloadPolicyLoading.value = false)
}

const logOpt = reactive({
  show: true,
  title: '日志埋点 (0)',
})
const handlePolicyLog = (operation:boolean) => {
  let params = {
    operation: operation,
    idList: xGrid.value.getCheckedList(true).map(e => e.id),
  }
  log(params).then(() => {
    xGrid.value.reload()
  })
}
const checkedCount = (count:number) => {
  logOpt.show = !(count > 0)
  logOpt.title = `日志埋点 (${count})`
}
</script>
<style scoped>
.disabled {
  pointer-events: none;
  opacity: .5;
  -moz-opacity: .5;
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}
</style>
